<template>
  <div class="revenue-analysis-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>收益分析</h2>
      <p>查看餐厅的营收数据和经营分析</p>
    </div>

    <!-- 营收统计卡片 -->
    <div class="revenue-stats-section">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card today-orders">
            <div class="stats-content">
              <div class="stats-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ todayStats.orders }}</div>
                <div class="stats-label">今日订单</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card today-revenue">
            <div class="stats-content">
              <div class="stats-icon">
                <el-icon><Money /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">¥{{ todayStats.revenue }}</div>
                <div class="stats-label">今日营收</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card monthly-revenue">
            <div class="stats-content">
              <div class="stats-icon">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">¥{{ monthlyStats.revenue }}</div>
                <div class="stats-label">本月营收</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stats-card avg-order">
            <div class="stats-content">
              <div class="stats-icon">
                <el-icon><DataBoard /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">¥{{ avgOrderValue }}</div>
                <div class="stats-label">订单均价</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 营收图表 -->
    <div class="charts-section">
      <el-row :gutter="20">
        <el-col :xs="24" :lg="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <el-icon class="chart-icon"><TrendCharts /></el-icon>
                <span>近7天营收趋势</span>
              </div>
            </template>
            <div class="chart-placeholder">
              <el-icon class="placeholder-icon"><TrendCharts /></el-icon>
              <p>营收趋势图表</p>
              <p class="placeholder-note">此处可集成图表库展示营收趋势</p>
            </div>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :lg="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <el-icon class="chart-icon"><PieChart /></el-icon>
                <span>营收来源分析</span>
              </div>
            </template>
            <div class="chart-placeholder">
              <el-icon class="placeholder-icon"><PieChart /></el-icon>
              <p>营收来源饼图</p>
              <p class="placeholder-note">此处可集成图表库展示营收来源</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 营收分析表格 -->
    <div class="revenue-table-section">
      <el-card class="table-card">
        <template #header>
          <div class="card-header">
            <el-icon class="table-icon"><Grid /></el-icon>
            <span>营收明细</span>
          </div>
        </template>
        <el-table :data="revenueData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="120" />
          <el-table-column prop="orders" label="订单数量" width="100" />
          <el-table-column prop="revenue" label="营收金额" width="120">
            <template #default="scope">
              ¥{{ scope.row.revenue }}
            </template>
          </el-table-column>
          <el-table-column prop="avgOrder" label="订单均价" width="120">
            <template #default="scope">
              ¥{{ scope.row.avgOrder }}
            </template>
          </el-table-column>
          <el-table-column prop="growth" label="增长率" width="100">
            <template #default="scope">
              <span :class="scope.row.growth >= 0 ? 'growth-positive' : 'growth-negative'">
                {{ scope.row.growth >= 0 ? '+' : '' }}{{ scope.row.growth }}%
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import {
  Document,
  Money,
  TrendCharts,
  DataBoard,
  PieChart,
  Grid
} from '@element-plus/icons-vue'

// 今日统计数据
const todayStats = ref({
  orders: 128,
  revenue: '3,680'
})

// 月度统计数据
const monthlyStats = ref({
  revenue: '89,240'
})

// 订单均价
const avgOrderValue = computed(() => {
  const orders = todayStats.value.orders
  const revenue = parseFloat(todayStats.value.revenue.replace(',', ''))
  return (revenue / orders).toFixed(0)
})

// 营收明细数据
const revenueData = ref([
  {
    date: '2024-01-15',
    orders: 128,
    revenue: '3,680',
    avgOrder: '28.8',
    growth: 15.2,
    remark: '周一营业正常'
  },
  {
    date: '2024-01-14',
    orders: 156,
    revenue: '4,230',
    avgOrder: '27.1',
    growth: 8.7,
    remark: '周日客流较多'
  },
  {
    date: '2024-01-13',
    orders: 142,
    revenue: '3,890',
    avgOrder: '27.4',
    growth: -2.3,
    remark: '周六营业稳定'
  },
  {
    date: '2024-01-12',
    orders: 134,
    revenue: '3,750',
    avgOrder: '28.0',
    growth: 5.8,
    remark: '周五营业良好'
  },
  {
    date: '2024-01-11',
    orders: 119,
    revenue: '3,420',
    avgOrder: '28.7',
    growth: -8.1,
    remark: '周四客流一般'
  }
])
</script>

<style scoped>
.revenue-analysis-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 页面标题 */
.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

/* 统计卡片 */
.revenue-stats-section {
  margin-bottom: 24px;
}

.stats-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-2px);
}

.stats-content {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
}

.today-orders .stats-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.today-revenue .stats-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
  color: white;
}

.monthly-revenue .stats-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: white;
}

.avg-order .stats-icon {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  color: white;
}

.stats-info {
  flex: 1;
}

.stats-number {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  line-height: 1;
}

.stats-label {
  font-size: 14px;
  color: #606266;
  margin-top: 4px;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 24px;
}

.chart-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #303133;
}

.chart-icon {
  margin-right: 8px;
  color: #409eff;
}

.chart-placeholder {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 12px;
  color: #c0c4cc;
}

.placeholder-note {
  font-size: 12px;
  color: #c0c4cc;
  margin: 4px 0 0 0;
}

/* 表格区域 */
.revenue-table-section {
  margin-bottom: 24px;
}

.table-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.table-icon {
  margin-right: 8px;
  color: #409eff;
}

.growth-positive {
  color: #67c23a;
  font-weight: 600;
}

.growth-negative {
  color: #f56c6c;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header h2 {
    font-size: 20px;
  }
}
</style> 